<template>
	<div class="page">

        <van-nav-bar title="商品详情" left-arrow fixed safe-area-inset-top @click-left="onClickLeft"></van-nav-bar>

        <van-swipe class="swiper" :autoplay="3000" indicator-color="white">
            <van-swipe-item class="swiper-item" v-for="(item,index) in info.pic_list" :key="index">
                <div class="item-img">
					<img :src="item" />
				</div>
            </van-swipe-item>
        </van-swipe>

		<div class="des">
			<div class="des-flex">
				<div class="des-price">
					<div class="price-font">
						<span class="price-icon">¥</span>
						<span class="price-num">{{ info.base_price_arr.z_price }}</span>
						<span class="price-small">.{{ info.base_price_arr.x_price }}</span>
					</div>
					<div class="price-des">{{ info.unit }}</div>
				</div>
				<!-- <div class="price-cart">
					<img v-if="info.buy_car_good_count == 0" @click.stop="addCart(1, 'cart')" class="icon-img" src="https://files.onestep6.com/cloud/cart-icon.png"  />
					<number-box v-if="info.buy_car_good_count > 0" v-model="info.buy_car_good_count" :good_id="info.id" :api="true" :is_cart="true" @numChange="numChange" @overLimit="overLimit" />
				</div> -->
			</div>
			<div class="des-title">{{ info.name }}</div>
			<div class="des-txt">{{ info.desc }}</div>
		</div>

		<div class="texteara" v-if="info.infos">
			<div class="texteara-title">产品详情</div>
			<div class="text-html" v-html="info.infos" ></div>
		</div>

		<div class="des-content">
			<div class="title">云上到家</div>
			<div class="content-flex">
				<img class="content-img" src="https://files.onestep6.com/cloud/dish-shop.png"  />
				<div>
					<div class="content-title">一站式购齐</div>
					<div class="content-des">云上到家采用平台自研供货系统，无需商家自行联系供货商，火锅原料食材一站式购齐</div>
				</div>
			</div>
			<div class="content-flex">
				<img class="content-img" src="https://files.onestep6.com/cloud/dish-ps.png"  />
				<div>
					<div class="content-title">配送服务</div>
					<div class="content-des">下单后，平台将实时为您匹配送货员，送货上门无需担心货源问题</div>
				</div>
			</div>
			<div class="content-flex">
				<img class="content-img" src="https://files.onestep6.com/cloud/dish-sh.png"  />
				<div>
					<div class="content-title">售后无忧，服务暖心</div>
					<div class="content-des">多渠道售后服务，商品质量问题，可联系平台客服，由云上到家专业客服为您服务</div>
				</div>
			</div>
		</div>

        <div class="price" v-if="is_admin == 1">
			<div class="price-right">
                <van-button v-if="info.status == 1" class="refund-btn" @click.stop="onDownGood()">下架</van-button>
                <van-button v-if="info.status == 0" class="refund-btn" @click.stop="onUpGood()">上架</van-button>
			</div>
            <div class="price-right">
				<van-button class="price-btn" @click.stop="priceChange()">改价</van-button>
			</div>
		</div>

        <popup-choose ref="popupChoose" txt="是否确认下架该商品，下架后，将不对平台商品进行展示" @right="onDownRight" />
        <popup-choose ref="popupUp" txt="是否确认上架该商品，上架后，商铺可正常查看与下单" @right="onUpRight" />
        <popup-price ref="popupPrice" @right="onPrice" />
	</div>
</template>

<script>
    import { goodInfo, upGoods, changePrice } from "@/api/cloud";
    import popupChoose from "@/components/popupChoose.vue";
    import popupPrice from "@/components/popupPrice.vue";
	export default {
        components: {
            popupChoose,
            popupPrice
        },
		data() {
			return {
				top_num: 0,
				home: false,
				info: {
                    pic_list: [],
                    base_price_arr: {
                        z_price: '',
                        x_price: ''
                    }
                },
				good_id: '',
				is_admin: 0,
			}
		},
        mounted() {
            this.good_id = this.$route.query.id;
            this.goodInfo();
			this.is_admin = localStorage.getItem('is_admin')
        },
		methods: {
            async goodInfo() {
                const res = await goodInfo({
                    id: this.good_id
                })
                if(res.status == 1) {
                    // res.data.info.infos = res.data.info.infos?.replace(/<p>/g,"<div>")
                    // res.data.info.infos = res.data.info.infos?.replace(/<\/p>/g,"</div>")
                    this.info = res.data.info;
                }
            },
            onClickLeft() {
                this.$router.back();
            },
            onDownGood() {
                this.$refs.popupChoose.show();
            },
            // 确认下架商品
            async onDownRight() {
                const res = await upGoods({
                    id: this.good_id,
                    status: 0
                })
                if (res.status == 1) {
                    this.$set(this.info, 'status', 0)
					this.$toast('下架成功')
                }
            },
            onUpGood() {
                this.$refs.popupUp.show();
            },
            async onUpRight() {
                const res = await upGoods({
                    id: this.good_id,
                    status: 1
                })
                if (res.status == 1) {
                    this.$set(this.info, 'status', 1)
					this.$toast('上架成功')
                }
            },
            priceChange() {
                this.$refs.popupPrice.show({
					base_price:this.info.base_price, 
					price: this.info.price
				});
            },
            // 确认改价
            async onPrice(data) {
                console.log(data)
                const res = await changePrice({
                    id: this.good_id,
                    ...data
                })
                if (res.status == 1) {
                    let arr = String(data.base_price).split('.');
                    this.$set(this.info, 'base_price_arr', { z_price: arr[0], x_price: arr[1]})
                    this.$toast.success('改价成功')
                }
            }
		}
	}
</script>

<style lang="less" scoped>
.page{
    width: 100%;
    padding-top: calc(92px);
    min-height: 100vh;
	padding-bottom: 282px;
    ::v-deep .van-nav-bar .van-icon {
        color: #323233;
    }

    ::v-deep .van-nav-bar {
        background: #FFFFFF;
    }

    ::v-deep .van-hairline--bottom::after {
        border: none;
    }
}

.swiper{
	width: 100%;
	height: 750px;
	margin-bottom: 24px;
	.swiper-item{
		width: 100%;
		height: 750px;
	}
	.item-img{
		width: 750px;
		height: 750px;
		img{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}

.des{
	width: 702px;
	padding: 32px 20px 20px 32px;
	background: #FFFFFF;
	border-radius: 16px;
	margin: 0 auto 24px;
	.des-flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.des-price{
			display: flex;
			align-items: center;
		}
		.price-font{
			color: #F6465D;
            
			line-height: 44px;
			font-weight: bold;
		}
		.price-icon{
			font-size: 24px;
		}
		.price-num{
			font-size: 58px;
		}
		.price-small{
			font-size: 36px;
		}
		.price-des{
			width: fit-content;
			height: 32px;
			font-size: 20px;
			line-height: 32px;
			color: #FFFFFF;
			font-weight: 400;
			padding-left: 10px;
			padding-right: 8px;
			border-radius: 8px;
			background: #49CA6F;
			margin-left: 14px;
		}
		.price-cart{
			.icon-img{
				display: block;
				width: 48px;
				height: 48px;
			}
		}
		.price-right{
			flex-shrink: 0;
		}
	}
	.des-title{
		padding-top: 24px;
		padding-bottom: 18px;
		font-size: 32px;
		line-height: 44px;
		color: #333333;
		font-weight: bold;
	}
	.des-txt{
		font-size: 24px;
		line-height: 30px;
		color: #798391;
		font-weight: 400;
	}
}

.des-content{
	width: 702px;
	padding: 24px 26px 16px 24px;
	background: #FFFFFF;
	border-radius: 16px;
	margin: 0 auto;
	.title{
		font-size: 28px;
		line-height: 40px;
		font-weight: bold;
		margin-bottom: 32px;
	}
	.content-flex{
		display: flex;
		align-items: center;
		margin-bottom: 24px;
		.content-img{
			flex-shrink: 0;
			display: block;
			width: 80px;
			height: 80px;
			margin-right: 12px;
		}
		.content-title{
			font-size: 24px;
			line-height: 40px;
			font-weight: bold;
		}
		.content-des{
			font-size: 20px;
			line-height: 24px;
			color: #798391;
			font-weight: 400;
		}
	}
}

.texteara{
    width: 702px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
    background: #FFFFFF;
    margin: 0 auto 24px;
	// box-shadow: 4px 8px 12px 0px rgba(255,167,94,0.2);
	border-radius: 20px;
    ::v-deep p,span,i{
        font-size: 28px;
		line-height: 40px;
    }
    // font-size: 24px;
    // line-height: 33px;
    ::v-deep img{
        width: 100%;
        line-height: 0;
        border-radius: 10px;
    }
    p{
        line-height: 0 !important;
    }
    img{
        vertical-align: top;
        width: 100%;
        border-radius: 10px;
    }
}
.texteara-title{
	font-size: 28px;
	line-height: 37px;
	color: #333333;
	font-weight: 500;
	margin-bottom: 20px;
}
.text-html{
    width: 662px;
    border-radius: 16px;
    background: #FFFFFF;
    ::v-deep img{
        width: 100%;
        border-radius: 10px;
    }
    ::v-deep img{
        width: 100%;
        border-radius: 10px;
    }
}

.price{
	position: fixed;
    left: 0;
    bottom: 0;
	display: flex;
	justify-content: flex-end;
    width: 100vw;
    padding-top: 19px;
	padding-left: 56px;
	padding-right: 28px;
    padding-bottom: calc(20px + constant(safe-area-inset-bottom)); /* 兼容 iOS<11.2 */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* 兼容iOS>= 11.2 */
    background: #FFFFFF;
	.price-right{
		display: flex;
		align-items: center;
		.price-btn{
			flex-shrink: 0;
			display: block;
			width: 216px;
			height: 72px;
			background: #49CA6F;
			border-radius: 39px;
			font-size: 32px;
			line-height: 72px;
			color: #FFFFFF;
			font-weight: bold;
			border:none;
			margin-left: 14px;
		}
		.price-btn::after{
			border:none;
		}
		.refund-btn{
			width: 216px;
			height: 72px;
			border: 2px solid #49CA6F;
			font-size: 32px;
			line-height: 68px;
			color: #49CA6F;
			font-weight: bold;
			border-radius: 39px;
			background: #FFFFFF;
		}
	}
}
</style>
